<template>
	<view class="classroom">
		<view class="banner" v-if="advList && advList.length > 0">
			<uni-swiper-dot :info="advList" :dotsStyles="dotsStyles" :current="current" field="content" :mode="mode">
				<swiper class="swiper-box" @change="change">
					<swiper-item v-for="(item, index) in advList" :key="index">
						<view class="swiper-item">
							<image :src="item.cover" mode="aspectFill" @click="jump(item.jump_type, item.jump_link)"></image>
						</view>
					</swiper-item>
				</swiper>
			</uni-swiper-dot>
		</view>
		<view class="line">
			<view class="labelView">卡号</view>
			<view class="inputView">
				<view class="loginMask" @click="jump('login')" v-if="accessToken == ''"></view>
				<!-- <fengCode boxWidth="600" maxlength="10" @onComplete="codeInput" ref="fengCode"></fengCode> -->
				<yi-code maxlength="10" width="600" @onComplete="codeInput"></yi-code>
			</view>
		</view>
		<view class="line">
			<view class="labelView">卡密</view>
			<view class="inputView">
				<view class="loginMask" @click="jump('login')" v-if="accessToken == ''"></view>
				<!-- <fengCode boxWidth="480" maxlength="8" @onComplete="pwdInput" ref="fengPwd"></fengCode> -->
				<yi-code maxlength="8" width="480" @onComplete="pwdInput"></yi-code>
			</view>
		</view>
		<view class="button" @click="bindCard()">提货</view>
		<view class="buttonList">
			<view class="btn" @click="jump(accessToken == '' ? 'login' : 'cardList', 'state=1')">我的卡包</view>
			<view class="btn" @click="previewImage(serviceImg,1)">联系客服</view>
		</view>
		<view class="tipView">若您遇到提货操作问题，请拨打<span @click="callPhone('400-075-2075')">400-075-2075</span>（周一至周日9点至20点）或添加客服微信，我们将协助您完成提货。</view>
	</view>
</template>

<script>
	import serve from '../../static/request.js';
	import storage from '../../static/appkey.js';
	import common from '../../static/jump.js';
	export default {
		data() {
			return {
				accessToken: '',
				advList: [],
				current: 0,
				dotsStyles: {
					backgroundColor: 'rgba(255,255,255,0.3)',
					selectedBackgroundColor: '#FFC600',
					selectedBorder: '1px rgba(255,198,0,1) solid',
					border: '1px rgba(255,255,255,0.3) solid',
					selectedBorder: '1px rgba(255,198,0,1) solid'
				},
				formParam: {
					code: '',
					pwd: '',
				},
				list: [],
				serviceImg: '',
			};
		},
		methods: {
			change(e) {
				this.current = e.detail.current;
			},
			codeInput(e) {
				this.formParam.code = e;
				console.info(this.formParam.code);
			},
			pwdInput(e) {
				this.formParam.pwd = e;
				console.info(this.formParam.pwd);
			},
			callPhone(phoneNumber) {
				uni.makePhoneCall({
					phoneNumber: phoneNumber,
					success: () => {
					  console.log('Dialing successful');
					},
					fail: (err) => {
					  console.error('Failed to dial', err);
					}
				  });
			},
			getList() {
				var self = this;
				serve.request({
					url: '/store/pickup/index',
					data: {}
				}).then(res => {
					self.advList = res.data.advList;
					self.serviceImg = res.data.serviceImg;
					// self.list = res.data.list;
				});
			},
			bindCard() {
				if(uni.getStorageSync('access-token') == "") {
					common.jump('login');
					return ;
				}
				if(this.formParam.code === "") {
					uni.showToast({
						title: "请输入完整的卡号",
						icon: 'none'
					})
					return;
				}
				if(this.formParam.pwd === "") {
					uni.showToast({
						title: "请输入完整的卡密",
						icon: 'none'
					})
					return;
				}
				let that = this;
				serve.request({
					url: '/store/pickup/bind-card',
					data: that.formParam
				}).then(res => {
					var resCode = res.code;
					var cardId = res.data.dataId;
					uni.showModal({
						title: '提示',
						content: res.message,
						showCancel: false,
						success: function (res) {
							if(resCode == 200) {
								that.$refs.fengCode.resetVal();
								that.$refs.fengPwd.resetVal();
								common.jump('confirmPickup', cardId);
							}
						},
					});
					return;
				});
			},
			previewImage:function(image,index){
				var arr = [];
				arr.push(image);
				uni.previewImage({
					current: 0,
					urls: arr
				})
			},
			jump(jump_type, jump_link){
				common.jump(jump_type, jump_link);
			}
		},
		onLoad() {
		},
		async onShow() {
			await this.$defaultLogin();
			this.accessToken = uni.getStorageSync('access-token');
			this.formParam.code = '';
			this.formParam.pwd = '';
			this.getList();
		},
		onPullDownRefresh() {
			this.getList();
		}
	};
</script>

<style lang="scss" scoped>
	.classroom {
		::-webkit-scrollbar {
			/*隐藏滚轮*/
			display: none;
		}

		width: 100%;
		padding-bottom: 140upx;

		.banner {
			// width: 100%;
			// height: 400upx;
			// image {
			// 	width: 100%;
			// 	height: 400upx;
			// }
			.swiper-box {
				width: 100%;
				height: 500upx !important;
				box-sizing: border-box;
				image {
					width: 100%;
					height: 500upx;
				}
			}
		}
		.tipView {
			padding: 50rpx;
		}
		.heng {
			height: 16upx;
			width: 100%;
			background: #FBFBFD;
		}
		.line {
			display: flex;
			align-items: center;
			padding-left: 30rpx;
			margin-top: 30rpx;
		
			&:nth-child(2) {
				margin-top: 30upx;
			}
		
			.labelView {
				display: block;
				width: 80rpx;
				text-align: right;
				padding-right: 20rpx;
				height: 60rpx;
				line-height: 60rpx;
			}
		
			.inputView {
				display: flex;
				align-items: flex-end;
				width: 70%;
				position: relative;
				
				.loginMask {
					width: 600rpx;
					position: absolute;
					height: 66rpx;
					z-index: 9999;
				}
				
				.onFocus {
					border: 2px solid #ff5500 !important;
					border-width: 2px;
					animation: myfirst 600ms infinite;
					caret-color: transparent;
					z-index: 99;
					@keyframes myfirst
					{
						0%   {opacity: 0.1}
						100% {opacity: 1}
					}
				}
				
				.hide {
					display: none;
				}
				
				.showInputVal {
					display: flex;
					position: absolute;
				}
				
				.inputBox {
					color: #3c4868;
					flex: 1;
					border: 2px solid #ccc;
					border-radius: 10rpx;
					font-size: 34rpx;
					width: 44rpx;
					height: 44rpx;
					margin-right: 10rpx;
					text-align: center;
				}
				
				.valBox {
					color: #3c4868;
					flex: 1;
					border-radius: 10rpx;
					font-size: 34rpx;
					width: 44rpx;
					height: 44rpx;
					margin-right: 10rpx;
					text-align: center;
				}
		
				.placeholder {
					color: rgba(60, 72, 104, 0.2);
				}
			}
		}
		.buttonList {
			display: flex;
			justify-content: space-around;
			.btn {
				border: 1rpx solid #ffc80a;
				background-color: #ffc80a;
				color: #fff;
				width: 30%;
				text-align: center;
				border-radius: 20rpx;
				height: 60rpx;
				line-height: 60rpx;
				font-size: 32rpx;
			}
		}
		.button {
			width: 640upx;
			height: 100upx;
			line-height: 100upx;
			color: #fff;
			background: rgba(255, 200, 10, 1);
			border-radius: 50upx;
			display: block;
			margin: 30upx auto 30upx;
			font-size: 40upx;
			text-align: center;
			letter-spacing: 20rpx;
			&::after {
				border: none;
			}
		}
		.list_item {
			width: 680rpx;
			padding-bottom: 16rpx;
			display: flex;
			padding: 40rpx 20rpx 20rpx 20rpx;
			border: 1rpx solid #ccc;
			margin-bottom: 8rpx;
			border-radius: 14rpx;
			position: relative;
			
			image {
				width: 150rpx;
				height: 150rpx;
				border-radius: 2%;
			}
			.item_info {
				width: calc(100% - 160rpx);
				height: 150rpx;
				padding-left: 10rpx;
				font-size: 28rpx;
				color: #333;
			}
			.code{
				position: absolute;
				right: 4rpx;
				top: 4rpx;
				width: 250rpx;
				font-size: 35rpx;
			}
			.title {
				height: 40rpx;
				overflow: hidden;
				text-overflow: -o-ellipsis-lastline;
				text-overflow: ellipsis;
				display: -webkit-box;
				-webkit-line-clamp: 1;
				-webkit-box-orient: vertical;
			}
			.sketch {
				font-size: 26rpx;
				color: #aaa;
				margin-top: 10rpx;
				overflow: hidden;
				text-overflow: -o-ellipsis-lastline;
				text-overflow: ellipsis;
				display: -webkit-box;
				-webkit-line-clamp: 1;
				-webkit-box-orient: vertical;
			}
			.price{
				margin-top: 20rpx;
				font-size:28rpx;
				color: #42bfca;
				position: relative;
				
				.goPickup {
					width: 100rpx;
					height: 50rpx;
					line-height: 50rpx;
					position: absolute;
					right: 20rpx;
					top: -10rpx;
					border: 1rpx solid #ffd900;
					text-align: center;
					border-radius: 10rpx;
					color: #fff;
					background: #ffd900;
				}
			}
		}
	}
</style>
